import React from 'react'
import { List,InputItem,WhiteSpace,WingBlank,Flex,Button,Modal } from 'antd-mobile'
import { changeNav,login } from '../actions'
import { connect } from 'react-redux'
import { Link } from 'react-router'
import { createForm } from 'rc-form'
import weixinicon from '../components/assets/weixin.png'
import qqicon from '../components/assets/qq.png'

const alert = Modal.alert

class Login extends React.Component {

  componentDidMount(){
    const { login } = this.props
    this.props.tochangeNav({title:"商龙云",rbtn:[
        
    ],navstyle:{ background:"#f5f5f9",color:"black" }})
  }

  render() {

    const { getFieldProps } = this.props.form

    return (
      <div>
        <div style={{ height:"200px" }}></div>
        <WingBlank>
         <List renderHeader={() => ''} className="speciallist">       
            <InputItem style={{ background:"#f5f5f9" }}
              {...getFieldProps('username',{ rules: [{required: true}] })} 
              clear 
              placeholder="手机号码/邮箱" 
              autoFocus
            />
            <InputItem style={{ background:"#f5f5f9" }}
              {...getFieldProps('password',{ rules: [{required: true}] })}
              placeholder="员工密码" 
              type="password"
          />
         </List>
         </WingBlank>
         <WhiteSpace size="lg" />
         <WhiteSpace size="lg" />
         <WingBlank>
                  <Button key="1" type="primary" onClick={ 
                  () => {
                    this.props.form.validateFields(( error,value )=>{
                      if( error ){
                        alert( '提示','请填写该写的字段')
                        return
                      }
                      this.props.login({ username:value.username
                            ,password:value.password })
                    })
                  } 
                }>确定</Button>
          </WingBlank>
          <WhiteSpace size="lg" />
         <WingBlank>
            <div style={{ textAlign:"right" }}>
              <Link to="/test1" style={{ color:"#bdbdbd" }}>忘记密码？</Link>
            </div>
         </WingBlank>
         <WingBlank>
         <div style={ {"background":"#ccc",
                       "textAlign":"center",
                       "height":"2px",
                       "position":"relative",
                       "margin":"122px 0px 50px 0px"} }>
            <div style={{ "position":"absolute","width":"100%","top":"-19px" }}>
              <span style={{ background:"#f5f5f9","padding":"0 10px 0 10px" }}>
                第三方账号登陆
              </span>
            </div>
         </div>
         </WingBlank>
         <Flex justify="center">
            <img src={ qqicon } style={{ marginRight:"15px" }}/>
            <img src={ weixinicon } />
         </Flex>
        
          

      </div>
    );
  }

}

const mapStateToProps = (state) => ({
    // loginstatus:state.loginStatus
})

const mapDispatchToProps = (dispatch,getState) => ({
    tochangeNav:navobj => dispatch( changeNav( navobj ) ),
    login:user => {
        dispatch( login( user ) )
    }
})

const FormWrapper = createForm()(connect(mapStateToProps,mapDispatchToProps)(Login))

export default FormWrapper